<div ng-if="!$ctrl.attributeValue.field.isSelect" class="form-group row">
    <div class="col-3">
        <h6 class="control-label m-0" ng-if="$ctrl.isShowTitle=='true'" ng-bind="$ctrl.attributeValue.field.title || $ctrl.attributeValue.field.name"></h6>
        <div ng-switch="$ctrl.attributeValue.dataType">
            <small class="text-muted" ng-switch-when="0">
                <!--custom-->
                (custom)
            </small>
            <small class="text-muted" ng-switch-when="1">
                <!--datetime-->
                (datetime)
            </small>
            <small class="text-muted" ng-switch-when="2">
                <!--date-->
                (date)
            </small>
            <small class="text-muted" ng-switch-when="3">
                <!--time-->
                (time)
            </small>
            <small class="text-muted" ng-switch-when="4">
                <!--duration-->
                (duration)
            </small>
            <small class="text-muted" ng-switch-when="5">
                <!--phonenumber-->
                (phonenumber)
            </small>
            <small class="text-muted" ng-switch-when="6">
                <!--Currency-->
                (currency)
            </small>
            <small class="text-muted" ng-switch-when="7">
                <!--Text-->
                (text)
            </small>
            <small class="text-muted" ng-switch-when="8">
                <!--Html-->
                (HTML)
            </small>
            <small class="text-muted" ng-switch-when="9">
                <!--TextArea-->
                (TextArea)
            </small>
            <small class="text-muted" ng-switch-when="10">
                <!--Email-->
                (Email)
            </small>
            <small class="text-muted" ng-switch-when="11">
                <!--Password-->
                (Password)
            </small>
            <small class="text-muted" ng-switch-when="12">
                <!--Url-->
                (URL)
            </small>
            <small class="text-muted" ng-switch-when="13">
                <!--ImageUrl-->
                (ImageUrl)
            </small>
            <small class="text-muted" ng-switch-when="14">
                <!--CreditCard-->
                (CreditCard)
            </small>
            <small class="text-muted" ng-switch-when="15">
                <!--PostalCode-->
                (PostalCode)
            </small>
            <small class="text-muted" ng-switch-when="16">
                <!--upload-->
                (Upload)
            </small>
            <small class="text-muted" ng-switch-when="17">
                <!--Color-->
                (Color)
            </small>
            <small class="text-muted" ng-switch-when="18">
                <!--Boolean-->
                (Boolean)
            </small>
            <small class="text-muted" ng-switch-when="19">
                (icon)
            </small>
            <small class="text-muted" ng-switch-when="20">
                (youtube)
            </small>
            <small class="text-muted" ng-switch-when="21">
                (markdown)
            </small>
            <small class="text-muted" ng-switch-when="22">
                <!-- Number -->
                (number)
            </small>
            <small class="text-muted" ng-switch-when="23">
                <!-- Referrence -->
                (reference)
            </small>
        </div>
    </div>
    <div ng-switch="$ctrl.attributeValue.dataType" class="col-9 pb-4">
        <div class="text-muted" ng-switch-when="0">
            <!--custom-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="1">
            <!--datetime-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.attributeValue.dataType)" type="datetime-local"
                ng-model="$ctrl.attributeValue.dateObj" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="2">
            <!--date-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.attributeValue.dataType)" type="date"
                ng-model="$ctrl.attributeValue.dateObj" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="3">
            <!--time-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.attributeValue.dataType)" type="time"
                ng-model="$ctrl.attributeValue.dateObj" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="4">
            <!--duration-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="5">
            <!--phonenumber-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="tel"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="6">
            <!--Currency-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.attributeValue.dataType)" type="number"
                ng-model="$ctrl.attributeValue.doubleValue" placeholder="{{$ctrl.attributeValue.field.title}}">
            <label class="control-label" ng-bind="$ctrl.attributeValue.doubleValue | currency:'': 6"></label>
        </div>
        <div class="text-muted" ng-switch-when="7">
            <!--Text-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="8">
            <!--Html-->
            <trumbowyg class="trumbowyg-dark" options="{}" ng-model="$ctrl.attributeValue.stringValue"></trumbowyg>
        </div>
        <div class="text-muted" ng-switch-when="9">
            <!--TextArea-->
            <textarea class="form-control form-control-sm {{$ctrl.inputClass}}" rows="5"
                ng-model="$ctrl.attributeValue.stringValue"
                placeholder="{{$ctrl.attributeValue.field.title}}"></textarea>
        </div>
        <div class="text-muted" ng-switch-when="10">
            <!--Email-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="email"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="11">
            <!--Password-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="password"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="12">
            <!--Url-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="13">
            <!--ImageUrl-->
            <input placeholder="{{$ctrl.attributeValue.field.title}}"
                class="form-control form-control-sm {{$ctrl.inputClass}}" type="url"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="14">
            <!--CreditCard-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="15">
            <!--PostalCode-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.attributeValue.stringValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted col-8 card p-0" ng-switch-when="16">
            <!--upload-->
            <custom-image header="'Image'" type="'Posts'" folder="'Attributes'"
                src-url="$ctrl.attributeValue.stringValue" src="$ctrl.attributeValue.stringValue" auto="'true'">
            </custom-image>
        </div>
        <div class="text-muted" ng-switch-when="17">
            <!--Color-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="color"
                value="{{$ctrl.attributeValue.stringValue}}" ng-model="$ctrl.attributeValue.stringValue"
                placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="18">
            <!--Boolean-->
            <input class="{{$ctrl.inputClass}}" type="checkbox" placeholder="{{$ctrl.attributeValue.field.title}}"
                ng-change="$ctrl.updateStringValue($ctrl.attributeValue.dataType)"
                ng-model="$ctrl.attributeValue.booleanValue" ng-checked="$ctrl.attributeValue.booleanValue">
        </div>
        <div class="text-muted" ng-switch-when="19">
            <mix-select-icons prefix="'fab'" options="$ctrl.icons" data="$ctrl.attributeValue.stringValue">
            </mix-select-icons>
        </div>
        <div class="text-muted" ng-switch-when="20">
            <youtube-editor code="$ctrl.attributeValue.stringValue"></youtube-editor>
        </div>
        <div class="text-muted" ng-switch-when="21">
            <tui-editor content="$ctrl.attributeValue.stringValue"></tui-editor>
        </div>
        <div class="text-muted" ng-switch-when="22">
            <!-- Number -->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="number"
                ng-model="$ctrl.attributeValue.doubleValue" placeholder="{{$ctrl.attributeValue.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="23">
            <!-- Referrence -->
            <!-- <a ng-if="$ctrl.parentId" href="/portal/attribute-set-data/details?dataId=default&attributeSetId={{$ctrl.attributeValue.field.referenceId}}&parentType={{$ctrl.parentType}}&parentId={{$ctrl.parentId}}" 
                class="btn btn-sm btn-primary px-4 mt-3 ng-scope">
                <i class="fas fa-plus"></i> Add
            </a> -->
            <div class="alert alert-warning" role="alert" ng-if="!$ctrl.attributeValue.dataId">
                <i class="fas fa-exclamation-triangle mr-3"></i> Please save the current item to initialization a parent
                ID
                before input it child's data!
            </div>
            <div class="row" ng-if="$ctrl.attributeValue.dataId">
                <div class="col-md-12">
                    <a href="/portal/attribute-set-data/create?attributeSetName={{$ctrl.attributeValue.attributeSetName}}&attributeSetId={{$ctrl.attributeValue.field.referenceId}}&dataId=default&refParentId={{$ctrl.parentId}}&refParentType={{$ctrl.parentType}}"
                        class="btn btn-sm btn-primary float-right px-4 mr-2">
                        <i class="fas fa-plus"></i> Create data
                    </a>
                </div>
                <div class="col-md-12">
                    <attribute-set-nav-values on-update="$ctrl.updateRefData(data)"
                        on-delete="$ctrl.removeRefData(data)" data="$ctrl.refData">
                    </attribute-set-nav-values>
                </div>
            </div>

            <!-- <tabs-v select-callback="selectPane(pane)" class="mb-3" ng-if="$ctrl.attributeValue.id">
                <pane-v id="pane-data-{{$ctrl.attributeValue.field.referenceId}}" header="Data" class="card-body">
                </pane-v>
                <pane-v id="pane-form-{{$ctrl.attributeValue.field.referenceId}}" header="Form" class="card-body">
                    <attribute-set-form ng-if="$ctrl.attributeValue.id"
                        attr-set-id="$ctrl.attributeValue.field.referenceId" default-id="'default'"
                        parent-id="$ctrl.parentId" parent-type="$ctrl.parentType" attr-data="$ctrl.refDataModel.data"
                        save-data="$ctrl.saveRefData(data)"></attribute-set-form>
                </pane-v>
            </tabs-v> -->
            <!-- <pre>{{$ctrl.attributeValue | json}}</pre> -->

        </div>
    </div>
</div>
<!-- TODO: Only allow stringValue -->
<div ng-if="$ctrl.attributeValue.field.isSelect" class="form-group row">
    <div class="col-3">
        <h6 class="control-label" ng-if="$ctrl.isShowTitle" ng-bind="$ctrl.attributeValue.field.title"></h6>
    </div>
    <div class="col-9">
        <select ng-if="$ctrl.attributeValue.dataType!=19" class="btn custom-select form-control"
            ng-model="$ctrl.attributeValue.stringValue">
            <option ng-repeat="item in $ctrl.attributeValue.field.options track by $index" ng-value="item.value">
                {{item.value}}
            </option>
        </select>
    </div>
    <br />
</div>